<template>
    <div class="page">
        <div class="header flex-align-items">
            <div class=' w-1200 breadcrumb '>
                <img  src="@/static/engineering5188/common/first.png" alt="">
                <span class="color66 m-l-10">服务中心</span>
                <span class="color66 m-l-5">></span>
                <span class="color00 m-l-5">VIP会员</span>
            </div>
        </div>
        <div  class='w-1200 m-t-60'>
            <div class="title">会员8大优势</div>
            <div class="m-t-48 item_list">
                <div class="item">
                    <img class="logoClass" src="@/static/engineering5188/service/viplogo.png" alt="">
                    <div class="item-title m-t-24">VIP诚信认证</div>
                    <div class="item-title-tips m-t-16">营业执照专业审核加以VIP标志，建立企业诚信档案，提高诚信度，彰显企业实力。</div>
                </div>
                <div class="item">
                    <img class="logoClass" src="@/static/engineering5188/service/product.png" alt="">
                    <div class="item-title m-t-24">产品排名优先</div>
                    <div class="item-title-tips m-t-16">产品列表排序靠前，搜索关键字，优先展示您的产品信息，抢先获得买家关注。</div>
                </div>
                <div class="item">
                    <img class="logoClass" src="@/static/engineering5188/service/web.png" alt="">
                    <div class="item-title m-t-24">精美企业网站</div>
                    <div class="item-title-tips m-t-16">同步PC端和手机端，多方位展示企业实力，迅速提高目标客户信任度。</div>
                </div>
                <div class="item">
                    <img class="logoClass" src="@/static/engineering5188/service/kuai.png" alt="">
                    <div class="item-title m-t-24">更多的信息发布数量</div>
                    <div class="item-title-tips m-t-16">产品展示、工程案例、公司相册、公司视频更多发布数量，充分展示企业相应信息和实力。</div>
                </div>
            </div>
            <div class="m-t-20 item_list">
                <div class="item-second">
                    <img class="logoClass" src="@/static/engineering5188/service/pc.png" alt="">
                    <div class="item-title m-t-24">电脑和手机多端展示</div>
                    <div class="item-title-tips m-t-16">布局电脑端和手机小程序端全方位展示，方便客户查找所需信息，针对性营销，商机无限推广。</div>
                </div>
                <div class="item-second">
                    <img class="logoClass" src="@/static/engineering5188/service/offline.png" alt="">
                    <div class="item-title ">线下集中推广</div>
                    <div class="item-title-tips">专职的业务人员针对所在区域在建项目的项目经理、采购经理、商务经理现场进行实时推广，打通上下游产业信息，省去了企业获取信息的大额推广费用，让客户主动找上门。</div>
                </div>
                <div class="item-second">
                    <img class="logoClass" src="@/static/engineering5188/service/23.png" alt="">
                    <div class="item-title m-t-24">商机互动服务</div>
                    <div class="item-title-tips m-t-16">为VIP会员提供商机速配、在建项目概况、客户主要人员联系方式、招采需求，为VIP会员创造更多商机。</div>
                </div>
                <div class="item-second">
                    <img class="logoClass" src="@/static/engineering5188/service/24.png" alt="">
                    <div class="item-title m-t-24">平台售后服务及跟踪</div>
                    <div class="item-title-tips m-t-16">专业商务助理，细心的服务，全程指导网络操作和贸易技巧，让你在工程行业生意更加轻松便捷。</div>
                </div>
            </div>

            <div class="vsdiv">
                <div class="vstitle">VIP会员</div>
                <div>
                    <img class="vslogo" src="@/static/engineering5188/service/vs.png" alt=""/>
                </div>
                <div class="vstitle">普通会员</div>
            </div>

            <div class="tableDiv ">
                <div class="flex">
                    <div class="tableHeader">
                        服务项目
                    </div>
                    <div class="tableHeaderVip">
                        VIP会员
                    </div>
                    <div class="tableHeader">
                        普通会员
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName ">
                        会员标识
                    </div>
                    <div class="tableColVip">
                        VIP会员
                    </div>
                    <div class="tableCol">
                        普通会员
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName2 ">
                        信息排名优先级别
                    </div>
                    <div class="tableColVip2">
                        优先
                    </div>
                    <div class="tableCol2">
                        靠后
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName ">
                        产品列表、搜索排名级别
                    </div>
                    <div class="tableColVip">
                        优先
                    </div>
                    <div class="tableCol">
                        靠后
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName2 ">
                        主页面上传相片张数
                    </div>
                    <div class="tableColVip2">
                        6张
                    </div>
                    <div class="tableCol2">
                        1张
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName ">
                        产品展示相片上传张数
                    </div>
                    <div class="tableColVip">
                        100张
                    </div>
                    <div class="tableCol">
                        4张
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName2 ">
                        工程案例上传相片张数
                    </div>
                    <div class="tableColVip2">
                        100张
                    </div>
                    <div class="tableCol2">
                        4张
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName ">
                        公司相册上传张数
                    </div>
                    <div class="tableColVip">
                        50张
                    </div>
                    <div class="tableCol">
                        1张
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName2 ">
                        公司视频上传个数
                    </div>
                    <div class="tableColVip2">
                        20个
                    </div>
                    <div class="tableCol2">
                        0
                    </div>
                </div>
                <div class=" flex">
                    <div class="tableColName ">
                        一对一专职业务人员服务
                    </div>
                    <div class="tableColVip flex-center">
                        <img class="gouxuanlogo" src="@/static/engineering5188/service/gouxuan.png" alt=""/>
                    </div>
                    <div class="tableCol">
                        X
                    </div>
                </div>
                <div  class=" flex">
                    <div class="tableColbottom ">
                        合作金额
                    </div>
                    <div class="tableColbottomVip ">
                        <div>
                            <span class="tableColbottomMony">￥</span>
                            <span class="tableColbottomNum">3600</span>
                            <span class="tableColbottomNian">/年</span>
                        </div>
                        <div class="buyButton">立即购买</div>
                    </div>
                    <div class="tableColbottomFree ">
                        免费
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
</template>

<script>
export default {
    name: "aboutUs",
    props: [],
    data() {
        return {
            privacyContent:'',
        };
    },
    props:{
    },
    computed: {
    },
    watch: {},
    created() {
        this.getData();
    },
    methods: {
        getData(){
            this.$httpApi("/api/setting", {},'get').then(res => {
                this.privacyContent = res.data.site_about_us
            })
        }
    },
};
</script>

<style scoped lang="less">
.page{
    width:100%;
    height:100%;
    background-color:  #F6F6F6;

    
    .header{
        width:100%;
        height:60px;
        background-color: #fff;
    }

    .w-1200{
        width:1200px;
        margin:0 auto;
    }

    .flex-align-items{
        display: flex;
        align-items: center;
    }

    .m-l-10{
        margin-left:10px;
    }

    .m-l-5{
        margin-left:5px;
    }

    .breadcrumb{
        font-weight: 400;
        font-size: 14px;
        line-height: 14px;
    }
    img{
        width:14px;
        height:14px;
    }
    .color66 {
        color: #666666;
    }
    .color00{
        color:#000;
    }

    .m-t-60{
        margin-top:60px;
    }

    .title{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32px;
        color: #0D0D0D;
        line-height: 48px;
        text-align: center;
    }

    .m-t-48{
        margin-top:48px;
    }

    .item{
        width: 285px;
        height: 300px;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .logoClass{
        width:86px;
        height:86px;
    }

    .m-t-24{
        margin-top:24px;
    }

    .item-title{
        font-weight: 500;
        font-size: 24px;
        color: #0D0D0D;
        line-height: 48px;
    }

    .m-t-16{
        margin-top:16px;
    }
    
    .item-title-tips{
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 28px;
        text-align: center;
        width:237px;
    }

    .item_list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .m-t-20{
        margin-top:20px;
    }
    .item-second{
        width: 285px;
        height: 336px;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .vstitle{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32px;
        color: #0D0D0D;
        line-height: 48px;
    }
    .vslogo{
        width: 140px;
        height: 140px;
    }
    .vsdiv{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 41px;
    }

    .tableDiv{
        margin-top: 29px;
        padding-bottom:59px;
    }
    .flex{
        display: flex;
    }

    .tableHeader{
        width: 400px;
        height: 88px;
        background: #FAFAFA;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #0D0D0D;
        line-height: 88px;
        text-align: center;
    }
    .tableHeaderVip{
        width: 400px;
        height: 88px;
        background: linear-gradient( 168deg, #FFE9CC 0%, #FDDCAE 34%, #F3C180 100%);
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26px;
        color: #A05502;
        line-height: 88px;
        text-align: center;
    }
    .tableColName{
        width: 400px;
        padding-left: 80px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
    }
    .tableCol{
        width: 400px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
        text-align: center;
    }
    .tableColVip{
        width: 400px;
        height: 50px;
        background: #FFEDC3;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #A15502;
        line-height: 50px;
        text-align: center;
    }
    .tableColName2{
        width: 400px;
        padding-left: 80px;
        height: 50px;
        background: #FAFAFA;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
    }
    .tableCol2{
        width: 400px;
        height: 50px;
        background: #FAFAFA;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
        text-align: center;
    }
    .tableColVip2{
        width: 400px;
        height: 50px;
        background: #FAE8BF;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #A15502;
        line-height: 50px;
        text-align: center;
    }
    .gouxuanlogo{
        width: 20px;
        height: 18px;
    }
    .flex-center{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableColbottom{
        width: 400px;
        height: 157px;
        background: #FAFAFA;
        padding-left: 80px;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
    }
    .tableColbottomVip{
        width: 400px;
        height: 157px;
        background: #FFEDC3;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .tableColbottomMony {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #9E5500;
        line-height: 50px;
    }

    .tableColbottomNum{
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 32px;
        color: #9E5500;
    }
    .tableColbottomNian{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #9E5500;
        line-height: 50px;
    }
    .buyButton{
        width: 174px;
        height: 48px;
        background: #A9600D;
        border-radius: 6px 6px 6px 6px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        margin-top: 18px;
    }
    .tableColbottomFree{
        width: 400px;
        height: 157px;
        background: #FAFAFA;
        border-radius: 0px 0px 0px 0px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0D0D0D;
        line-height: 50px;
        text-align: center;
    }
}
</style>